import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:xingsu/page/user/viewmodel/register_viewmodel.dart';

import '../../res/colors.dart';
import '../../util/image_util.dart';
import '../../util/widget_util.dart';

class RegisterPage extends StatelessWidget {
  final RegisterViewModel _viewModel = RegisterViewModel();

  @override
  Widget build(BuildContext context) {
    final phone = TextFormField(
      keyboardType: TextInputType.emailAddress,
      autofocus: false,
      controller: _viewModel.phoneController,
      decoration: InputDecoration(
          hintText: '请输入手机号',
          contentPadding: const EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 10.0),
          enabledBorder: UnderlineInputBorder(
              borderSide:
                  BorderSide(color: Get.theme.dividerTheme.color!, width: 0.7)),
          focusedBorder: const UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xFF6AF7D8)))),
    );

    final code = Stack(
      children: [
        TextFormField(
          keyboardType: TextInputType.number,
          autofocus: false,
          maxLength: 6,
          controller: _viewModel.codeController,
          decoration: InputDecoration(
              hintText: '请输入验证码',
              counterText: '',
              contentPadding: const EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 10.0),
              enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                      color: Get.theme.dividerTheme.color!, width: 0.7)),
              focusedBorder: const UnderlineInputBorder(
                  borderSide: BorderSide(color: Color(0xFF6AF7D8)))),
        ),
        Positioned(
          right: 0,
          child: InkWell(
            onTap: _viewModel.sendCode,
            child: Container(
              width: 100,
              height: 32,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  border: Border.all(color: Colors.indigoAccent)),
              alignment: Alignment.center,
              child: Obx(() => Text(
                    _viewModel.second.value == 60
                        ? '发送验证码'
                        : '${_viewModel.second.value}s后重新发送',
                    style: const TextStyle(fontSize: 12),
                  )),
            ),
          ),
        )
      ],
    );

    final password = TextFormField(
      autofocus: false,
      obscureText: true,
      controller: _viewModel.pwdController,
      decoration: InputDecoration(
          hintText: '请输入密码',
          contentPadding: const EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 10.0),
          enabledBorder: UnderlineInputBorder(
              borderSide:
                  BorderSide(color: Get.theme.dividerTheme.color!, width: 0.7)),
          focusedBorder: const UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xFF6AF7D8)))),
    );

    final password1 = TextFormField(
      autofocus: false,
      obscureText: true,
      controller: _viewModel.pwd1Controller,
      decoration: InputDecoration(
          hintText: '请再次输入密码',
          contentPadding: const EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 10.0),
          enabledBorder: UnderlineInputBorder(
              borderSide:
                  BorderSide(color: Get.theme.dividerTheme.color!, width: 0.7)),
          focusedBorder: const UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xFF6AF7D8)))),
    );

    final regButton =
        WidgetUtil.btnWidget(title: "注册", clickCallback: _viewModel.register);

    return Scaffold(
        appBar: AppBar(
          title: const Text(
            '注册',
          ),
        ),
        body: ListView(
          padding: const EdgeInsets.only(left: 24.0, right: 24.0, top: 20.0),
          children: <Widget>[
            loadAssetImage("logo", width: 100, height: 100),
            const SizedBox(height: 48.0),
            phone,
            const SizedBox(height: 25.0),
            code,
            const SizedBox(height: 25.0),
            password,
            const SizedBox(height: 25.0),
            password1,
            const SizedBox(height: 24.0),
            regButton,
          ],
        ));
  }
}
